<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden;position:relative;border:5px solid purple;}
#div1 ul {/* width:10000px; */position:absolute;left: 0;top: 0;}
#div1 ul li{height:500px;float: left;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;cursor:pointer;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
	</head>
	<body>
		<div id="div1">
	<ul>
    	<li><img src="img/1.jpg" /></li>
    	<li><img src="img/2.jpg" /></li>
    	<li><img src="img/3.jpg" /></li>
    	<li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
    </ul>
    <ol>

    </ol>
    <a href="javascript:;" id="goPrev">&laquo;</a>
    <a href="javascript:;" id="goNext">&raquo;</a>
</div>
<script type="text/javascript">
	window.onload = function () {
		//获取元素
		var div = document.querySelector('#div1')
		var ul =document.querySelector('ul')
		var imgs = document.querySelectorAll('ul li')
		var ol = document.querySelector('ol')
		var goPrev = document.querySelector('#goPrev')
		var goNext = document.querySelector('#goNext')
		btns = []//存放所有按钮,动态存放,按钮个数自适应
		//记录运动状态 默认为false
		var isMove =false
		//自动轮播的定时器
		var timer = null
		//当前图片的下标
		var index = 0
		//上一张图片的下标
		var lastindex = 0
		//获取本来图片的张数
		var len = imgs.length
		//获取每张图片的宽度
		var width = imgs[0].offsetWidth
		//在ul里追加第0张图
		ul.appendChild(imgs[0].cloneNode(true))
		//计算当前ul的宽度
		ul.style.width = (len + 1) * width + 'px'
		//根据图片张数创建相同个数按钮.并绑定事件完成按钮切换
		for (let i = 0 ;i < len; i++) {
			var li = document.createElement('li')
			li.innerHTML = i+1
			if (i===0) li.className = 'ac'
			ol.appendChild(li)
			//按钮放进数组
			btns.push(li)
			li.onclick = function () {
				if (!isMove) {
					//开始移动了
					isMove = true
					lastindex = index
					index = i
					//按钮样式切换
					btns[lastindex].classList.remove('ac')
					btns[index].classList.add('ac')
					//ul移动到当前index的位置
					move(index)
				}
			}
		}
		//move移动方法
		 function move(num, fn) {
		  clearInterval(ul.timer)
		  // 起点值就是当前ul相对offsetParent的偏移
		  var start = ul.offsetLeft;
		  // num是当前运动的下标
		  var end = -num * width;
		  ul.timer = setInterval(() => {
		    var distance = end - start;
		    var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)
		    start += speed
		    ul.style.left = start + 'px'
		    if (start === end) {
		      clearInterval(ul.timer)
		      // 每一次move结束都应该回到静止状态
		      isMove = false
		      fn && fn()
		    }
		  }, 30)
		}
		//向后切换
		goNext.onclick= function () {
			if (!isMove) {
				isMove = true
				lastindex = index
				index++
				if (index===len){
					//index 的值只能立马回到0
					index=0
					 // 往追加那张图移动（追加那张图的下标就是len），移动结束之后瞬间回到第0张
					  move(len, function () {
					         // ul回到第0张
					         ul.style.left = '0px'
					       })
					     } else {
					       // 普通情况下就直接让ul移动到当前index的位置
					       move(index)
					     }
					     // 不论if还是else按钮都按照正常的index切换样式
					     btns[lastindex].classList.remove('ac')
					     btns[index].classList.add('ac')
					   }
					 }
					  // 向前切换
					 goPrev.onclick = function () {
					   if (!isMove) {
					     isMove = true
					     lastIndex = index;
					     index--;
					     if (index < 0) {
					       // 瞬间拉到追加那一张，再移动
					       index = len - 1
					       ul.style.left = -len * width + 'px'
					     }
					     // 按钮样式切换
					     btns[lastIndex].classList.remove('ac')
					     btns[index].classList.add('ac')
					     // 让ul移动到当前index的位置
					     move(index);
					   }
					 }
					 //自动轮播
					  function auto () {
					   timer = setInterval(() => {
					     goNext.onclick();
					   }, 3000)
					 }
					 auto()
					 div.onmouseenter = function () {
					   clearInterval(timer)
					 }
					 
					 div.onmouseleave = auto;
					 
				}
			
		
	
</script>
	</body>
</html>
